<template>
  <image
    :x="value.x1"
    :y="value.y1"
    :width="value.w1"
    :height="value.h1"
    :id="lid"
    style="fill: rgb(255, 255, 255); stroke-width: 2; stroke: rgb(50, 50, 50)"
    @click.stop="value.click(lid)"
    :href="value.imgUrl"
    v-if="value.imgValue"
  />
  <rect
    :x="value.x1"
    :y="value.y1"
    :width="value.w1"
    :height="value.h1"
    :id="lid"
    style="
      fill: rgb(255, 255, 255);
      stroke-width: 2;
      stroke: rgb(50, 50, 50);
      cursor: pointer;
    "
    v-else
  >
  </rect>
</template>
<script>
import JsBarcode from "jsbarcode";
export default {
  props: {
    lid: null,
    value: {
      h1: 0,
      w1: 0,
      x1: 0,
      y1: 0,
      imgValue: null,
      imgUrl: null,
    },
  },
  data() {
    return {};
  },
  watch: {
    "value.imgValue": {
      handler(newVal) {
        this.getBarCode(newVal);
      },
      deep: true,
    },
  },
  created() {
    this.getBarCode(this.$props.value.imgValue);
  },
  mounted() {},
  methods: {
    getBarCode(value) {
      var input = document.createElement("img");
      JsBarcode(input, value, {
        margin: 0,
      });
      if (input.src) {
        this.value.imgUrl = input.src;
      }
    },
    /**
     * File转base64
     */
    blobToDataURL(file) {
      var that = this;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        that.value.imgValue = e.target.result;
        return e.target.result;
      };
    },
  },
};
</script>
